<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            background-color 设置背景颜色

            background-image 设置背景图片
                可以同时设置背景图片和背景颜色，这样背景颜色会成为图片的背景颜色
                背景图片大于元素，不完全显示；小于则平铺

            background-repeat 设置背景的重复方式
                可选值：                                
                    repeat 默认值，背景会沿着x轴、y轴双方向重复
                    repeat-x 沿着x轴方向重复
                    repeat-y 沿着y轴方向重复
                    no-repeat 不重复

            background-position 设置背景图片的位置
                设置方式：通过 top left right bottom center
                    中的两个值，如不指定则为center
                    还可以直接通过偏移量来设置

            background-clip 设置背景的范围
                可选值：
                    border-box 默认值，背景会出现在边框的下面
                    padding-box 背景不会出现在边框，只会出现在内容区和内边距
                    content-box 只出现在内容区
            
            background-size 设置背景图片的大小
                第一个值表示宽度，第二个表示高度
                如果只写一个，则第二个默认值为auto

                cover 图片的比例不变，将该元素铺满
                contain 图片比例不变，将图片在元素中完整显示

            background-origin 背景图片的偏移量计算的原点
                padding-box 默认值，position从内边距开始计算
                content-box 从内容区开始计算
                border-box 从边框开始计算

            background-attachment 是否跟随元素移动
                可选值：
                    scroll 默认值，跟随移动
                    fixed 固定在页面中，不会跟随移动
            
            background 背景相关属性的简写，没有顺序要求
                注意：
                    background-size必须写在background-position
                的后面，并且用/隔开
                    background-origin 和 background-clip两个样式，
                origin 要在 clip 前面
            
        */

        /* 
        box-shadow 和 outline 
            box-shadow 用来设置元素的阴影效果，
            可以层层叠加，创建任意数量的投影，逗号隔开
            水平偏移量 垂直偏移量 模糊半径 阴影颜色
        */

        /* 
            outline 轮廓，用法和 border 一样
            不同在于 outline 不会影响可见框的大小
            border 会改变可见框的大小，进而影响其他元素的位置
        */

        .box1 {
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: aquamarine;
            box-shadow: 0 0 0 10px #655,
                0 0 0 15px deeppink,
                0 2px 5px 15px rgba(0, 0, 0, .6);
        }

        /* 内部边框有圆角或者其他样式，外部没有 */
        .box2 {
            width: 100px;
            height: 75px;
            margin-top: 30px;
            padding: .8em;
            text-align: center;
            background-color: beige;
        }

        .box2>div {
            background-color: rgb(162, 137, 137);
            border-radius: .8em;
            padding: 1em;
        }
    </style>
</head>

<body>
    <div class="box1"></div>

    <!-- 内部边框有圆角或者其他样式，外部没有 -->
    <div class="box2">
        <div>some content</div>
    </div>

</body>

</html>